import React, { useContext } from 'react'
import { Modal, Form, Cascader, Input, Button } from 'antd'
import styles from './index.module.less'
import { context } from '../../_context'
import { validatorPhone, validateEmail, validateName } from '@/utils/formValidator'

export default () => {
  const { manageParams, topConfig, filterParams } = useContext(context)
  const { showManage, setShowMange } = manageParams

  return (
    <Modal
      onCancel={() => setShowMange(false)}
      afterClose={manageParams.handelModal}
      title={topConfig.addAndEdit ? '新增病区管理员' : '编辑病区管理员'}
      footer={null}
      open={showManage}
    >
      <Form
        onFinish={manageParams.modalFinish}
        form={manageParams.modalForm}
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 16 }}
      >
        <Form.Item label='目录' name='inpatientWardId' rules={[{ required: true, message: '请选择目录' }]}>
          <Cascader
            disabled={!topConfig.addAndEdit}
            // displayRender={displayRender}
            expandTrigger='hover'
            placeholder='请选择目录'
            options={manageParams.modalLinkageData}
            // options={data}
          />
        </Form.Item>

        <Form.Item label='姓名' name='username' rules={[{ required: true, validator: validateName }]}>
          <Input placeholder='请输入姓名' />
        </Form.Item>

        <Form.Item label='手机号' name='phone' rules={[{ required: true, validator: validatorPhone }]}>
          <Input maxLength={11} placeholder='请输入手机号' />
        </Form.Item>

        <Form.Item label='邮箱' name='email' rules={[{ required: true, validator: validateEmail }]}>
          <Input placeholder='请输入邮箱' />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
          <div className={styles.footer}>
            <Button style={{ marginRight: 30 }} onClick={filterParams.clearModal}>
              取消
            </Button>
            <Button type='primary' htmlType='submit'>
              确认
            </Button>
          </div>
        </Form.Item>
      </Form>
    </Modal>
  )
}
